<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style>
body, html { width:100%; height:100%; margin:0; }
#allmap { height:100%; width:100%; }
#debug { position:absolute; left:70px; top:20px;}
#copyright { position:absolute; right:0; bottom:0; }
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=BNkUySO57K2gqmzKWdsyIOCk"></script>
<title>旅游路线</title>
</head>
<body>
<div id="allmap"></div>
<div id="debug">
<!--衡阳,重庆,九寨沟,成都,乐山,峨眉山-->
<input type=text id="cities" value="衡阳,香港"> <button id="search">搜索</button><br>
<input type=text id="LngLat"> <button id="add">添加</button>
</div>
<div id=copyright>&copy; 2017-2018 海天鹰版权所有</div>
<script>
function $id(s){return document.getElementById(s);}

var map = new BMap.Map("allmap");
var navigation = new BMap.NavigationControl();	//平移、缩放控件
map.addControl(navigation);
var mapType = new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_RIGHT});	//地图，卫星，三维
map.addControl(mapType);
var scale_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});	// 添加比例尺
map.addControl(scale_control); 
map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom();     //启用地图惯性拖拽，默认禁用
map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);
map.addEventListener("click",function(e){
	$id("LngLat").value = e.point.lng + " " + e.point.lat;
});

var points = [];
var distance_all = 0;
function search(){
	map.clearOverlays();
	var cities = $id('cities').value.split(',');
	console.log(cities);
	var ls = {color : "white", fontSize : "12px",fontWeight :"bold" , backgroundColor :"transparent", border:0};
	points = [];
	distance_all = 0;
	for(var i=0; i<cities.length; i++){
		if(cities[i].indexOf('(') == 0){
			var LngLat = cities[i].split(' ');
			console.log(LngLat);
			points[i] = new BMap.Point(LngLat[0].substr(1), LngLat[1].substr(0, LngLat[1].length-1));
			var marker = new BMap.Marker(points[i]);
			map.addOverlay(marker);
			var opts = {
				position : points[i],
				offset   : new BMap.Size(-5, -22)
			}
			var label = new BMap.Label(i+1, opts);
			label.setStyle(ls);
			map.addOverlay(label);	
		}else{
		var myGeo = new BMap.Geocoder();
		(function(i){
			myGeo.getPoint(cities[i], function(point){
				if(point){
					points[i] = point;
					var marker = new BMap.Marker(point);
					map.addOverlay(marker);
					var opts = {
						position : points[i],
						offset   : new BMap.Size(-5, -22)
					}
					var label = new BMap.Label(i+1, opts);
					label.setStyle(ls);
					map.addOverlay(label);				
				}
				//console.log(points[i]);		
			},cities[i]);
		})(i);
		}
	}
	setTimeout(drawLine,1000);
}

function drawLine(){
	map.centerAndZoom(points[points.length/2],5);
	var polyline = new BMap.Polyline(points, { strokeColor:"red", strokeWeight:2, strokeOpacity:0.8 }); 
	map.addOverlay(polyline);
	for(var i=0; i<points.length; i++){
		if(i>0){
			var	opts = {
				position : points[i],
				offset   : new BMap.Size(10, -25)
			}
			var distance = map.getDistance(points[i-1], points[i])/1000;
			distance_all += distance;
			var label = new BMap.Label(distance.toFixed() + "千米", opts);			
			map.addOverlay(label);
		}
	}
	var	opts = {
		position : points[points.length-1],
		offset   : new BMap.Size(10, 0)
	}			
	var label = new BMap.Label("总共：" + distance_all.toFixed() + "千米", opts);
	map.addOverlay(label);
}

$id('search').onclick = function(){ search(); }

$id('add').onclick = function(){
	if($id('LngLat').value != ""){
		$id('cities').value = $id('cities').value + ",(" + $id('LngLat').value + ")";
	}
}
</script>
</body>
</html>